<template>
  <BasicTable
    @register="registerTable"
    v-bind="$attrs"
    :scroll="{
      x: '100%',
    }"
    @selection-change="selectionChange"
  >
    <template #tableTitle>
      <slot name="tableTitle"></slot>
    </template>
    <template #headerCell="headerCellData">
      <div class="flex" style="align-items: center">
        <HeaderCell :column="headerCellData.column" />
        <slot name="headerCell" v-bind="headerCellData"></slot
      ></div>
    </template>
    <template #bodyCell="bodyCellData">
      <slot name="bodyCell" v-bind="bodyCellData"></slot>
      <template v-if="bodyCellData.column.key === 'action'">
        <slot name="action" :rowData="bodyCellData.record"></slot>
      </template>
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
  import { toRefs, unref, nextTick } from 'vue';
  import {
    BasicTable,
    useTable,
    BasicColumn,
    TableRowSelection,
    PaginationProps,
  } from '/@/components/Table';
  import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';

  import type { FormProps } from '/@/components/Form';

  const $emit = defineEmits(['success', 'selection-change']);

  const props = defineProps({
    columns: {
      type: Array as PropType<BasicColumn[]>,
      default: () => [],
    },
    formConfig: {
      type: Object as PropType<Partial<FormProps>>,
      default: () => {},
    },
    api: {
      type: Function as PropType<(...arg: any) => Promise<any>>,
      default: () => {},
    },
    params: {
      type: Object,
      default: () => {},
    },
    pagination: {
      type: [Boolean, Object] as PropType<boolean | PaginationProps>,
      default: true,
    },
    actionColumn: {
      type: Boolean,
      default: true,
    },
    rowSelection: {
      type: Object as PropType<TableRowSelection | undefined>,
      default: () => {},
    },
    rowKey: {
      type: String,
      default: '',
    },
    useSearchForm: {
      type: Boolean,
      default: false,
    },
    resizeHeightOffset: {
      type: Number,
      default: 90,
    },
    actionColumnWidth: {
      type: Number,
      default: 120,
    },
    loading: {
      type: Boolean,
      default: true,
    },
  });
  const {
    api,
    params,
    columns,
    pagination,
    formConfig,
    actionColumn,
    rowSelection,
    rowKey,
    resizeHeightOffset,
    useSearchForm,
    actionColumnWidth,
    loading,
  } = toRefs(props);

  const [registerTable, { reload, setTableData, redoHeight, setProps, getForm }] = useTable({
    columns: unref(columns),
    api: unref(api),
    useSearchForm: unref(useSearchForm),
    showIndexColumn: false,
    pagination: unref(pagination),
    formConfig: unref(formConfig),
    customLoading: loading,
    canResize: true,
    beforeFetch(pageParams) {
      const obj = {
        ...unref(params),
        ...pageParams,
      };

      return obj;
    },
    showTableSetting: true,
    tableSetting: {
      // 是否显示字段调整按钮
      setting: false,
    },
    rowKey: unref(rowKey),
    resizeHeightOffset: resizeHeightOffset,
    rowSelection: rowSelection,
    actionColumn: {
      defaultHidden: !unref(actionColumn),
      width: unref(actionColumnWidth),
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });

  const selectionChange = ({ key, rows }) => {
    $emit('selection-change', { key, rows });
  };

  const searchForm = (data) => {
    const { setFieldsValue, submit } = getForm();
    setFieldsValue(data);
    submit();
  };
  nextTick(() => {
    redoHeight();
    $emit('success', {
      searchForm,
      reload,
      setTableData,
      setProps,
    });
  });

  // defineExpose(searchForm);
</script>

<style lang="less" scoped>
  :deep(.ant-table-wrapper) {
    margin: 0 !important;
  }
</style>
